import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
import { Avatar, Card, Descriptions } from 'antd';
import LoginAndRegister from '../components/forms/LoginAndRegister';
import CommonModal from '../components/modals/CommonModal';
import Carousel from '../components/carousel/Carousel';

import React, { useState } from 'react';

const { Meta } = Card;

export default () => {
  const [isShowModal, setIsShowModal] = useState<boolean>(false);
  const [isLogined, setIsLogined] = useState<boolean>(false);
  return (
   <div style={{display:'flex', justifyContent: 'center', alignItems: 'center', width: '100vw'}}>
    
    <CommonModal isShowModal={isShowModal} setIsShowModal={(flag: boolean) => {setIsShowModal(flag)}}>
      <LoginAndRegister 
        isLogined={true} setIsLogined={() => {}}></LoginAndRegister>  
    </CommonModal>  
    { !isLogined ? (
      <div style={{width: '30%', height: '80vh', display: 'flex', alignItems:'center'}}>
        <div style={{ width: '100%', height: '50%', textAlign: 'center' }}>
          <LoginAndRegister 
            isLogined={isLogined} 
            setIsLogined={() => {setIsLogined(true)}}></LoginAndRegister>
        </div>
      </div> 
      ) : (
      <div style={{
        display: 'flex',
        flexDirection: 'column',
      }}>
        <Carousel></Carousel>
        <Card
          style={{ width: '100vw', height: '40vh', padding:'20px 5px'}}
          actions={[
            <SettingOutlined value={'修改密码'} onClick={() => {setIsShowModal(true)}} />,
            <EditOutlined value={'修改个人信息'}/>,
            <EllipsisOutlined  value={'更多操作'}/>,
          ]}
        >
          <Meta
            avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
            title="用户名"
            description="健康"
          />
          <Descriptions title="用户信息">
            <Descriptions.Item label="年龄">41</Descriptions.Item>
            <Descriptions.Item label="性别">女</Descriptions.Item>
            <Descriptions.Item label="账号/电话">1810000000</Descriptions.Item>
            <Descriptions.Item label="所在地区">浙江杭州</Descriptions.Item>
            <Descriptions.Item label="详细地址">
                某某某市区某某街道某小区
            </Descriptions.Item>
          </Descriptions>
        </Card> 
      </div>)}
   </div> 
  )
};